.home {
    position: relative;
    width: 750rpx;
    height: 3900rpx;
  
  .box {
    position: relative;
    width: 750rpx;
    height: 3900rpx;
    
    .onLook1 {
        position: absolute;
        top: 780rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 400rpx;
        height: 200rpx;
    }

    .onLook2 {
        position: absolute;
        top: 1400rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 400rpx;
        height: 200rpx;
    }

    .onLook3 {
        position: absolute;
        top: 2020rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 400rpx;
        height: 200rpx;
    }

    .onLook4 {
        position: absolute;
        top: 2950rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 400rpx;
        height: 200rpx;
    }

    .onLook5 {
        position: absolute;
        top: 3420rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 400rpx;
        height: 200rpx;
    }

    .home-bg {
        position: absolute;
        width: 750rpx;
        height: 3900rpx;
        z-index: -1;
    }

    .rule-bg {
        position: fixed;
        top: 50%;
        left: 65%;
        transform: translate(-65%,-50%);
        width: calc(686rpx *0.9);
        height: calc(1291rpx *0.9);
        z-index: 1;

        .rule-img {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 2;
        }

        .cancelView {
            position: absolute;
            top: 1025rpx;
            left: 50%;
            transform: translateX(-50%);
            width:300rpx;
            height: 62rpx;
            z-index: 3;
        }
    }
  }

  

}

.mask {
    background-color: rgba(0, 0, 0, 0.5);
}

.nomask {
    background-color: auto;
}